<template>
  <div class="box">
    <header class="header">home</header>
    <div class="content" id="content" ref="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
          <van-image :src="item.img" fit="contain" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :border="false" :column-num="5">
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png"
          text="京东超市"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp"
          text="数码电器"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp"
          text="京东服饰"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp"
          text="京东生鲜"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp"
          text="京东到家"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png.webp"
          text="充值缴费"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png.webp"
          text="9.9元拼"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png.webp"
          text="领劵"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png.webp"
          text="领金贴"
        />
        <van-grid-item
          icon="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png.webp"
          text="PLUS会员"
        />
      </van-grid>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="item of prolist"
          :key="item.proid"
          :price="item.price"
          :desc="item.desc"
          :title="item.proname"
          :thumb="item.proimg"
          @click="toDetail(item)"
        />
        </van-list>
      </van-pull-refresh>
      <div class="backtop" @click="backtop" v-show="flag"><i class="iconfont icon-fanhuidingbu"></i></div>
    </div>
  </div>
</template>

<style lang='scss'>
.my-swipe .van-swipe-item {
  height: 1.5rem;
  background-color: #efefef;
}
.backtop {
  position: fixed;
  font-size: 30px;
  right: 10px;
  bottom: 60px;
  i{
    font-size: 30px;
    color: #6cf;
  }
}
</style>
<script>
import Vue from 'vue'
import {
  Swipe,
  SwipeItem,
  Image as VanImage,
  Card,
  Grid,
  GridItem,
  List,
  PullRefresh
} from 'vant'
import { getBannerData, getProData } from './../../api'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Card)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  data () {
    return {
      bannerlist: [],
      prolist: [],
      count: 1,
      loading: false,
      finished: false,
      isLoading: false,
      flag: false
    }
  },

  components: {},

  computed: {},

  mounted () {
    getBannerData().then((res) => {
      // console.log(res.data.data)
      this.bannerlist = res.data.data
    })
    getProData().then((res) => {
      this.prolist = res.data.data
    })
    this.$refs.content.addEventListener('scroll', () => {
      // console.log(this.$refs.content.scrollTop)
      if (this.$refs.content.scrollTop > 250) {
        this.flag = true
      } else {
        this.flag = false
      }
    })
  },

  methods: {
    onLoad () {
      this.loading = true
      getProData({
        limit: 10,
        count: this.count
      }).then(res => {
        // console.log(res.data.data)
        this.loading = false
        this.count++
        if (res.data.data.length === 0) {
          this.finished = true
        } else {
          this.prolist = [...this.prolist, ...res.data.data]
        }
      })
    },
    backtop () {
      // console.log(this.$refs.content === document.getElementById('content', 111))
      var timer = setInterval(() => {
        if (this.$refs.content.scrollTop > 0) {
          this.$refs.content.scrollTop -= 500
        } else {
          clearInterval(timer)
        }
      }, 5)
    },
    onRefresh () {
      this.isloading = true
      getProData().then(res => {
        this.isLoading = false
        this.prolist = res.data.data
        this.count = 1
        this.finished = false
      })
    },
    toDetail (item) {
      this.$router.push({ path: '/detail/' + item.proid })
    }
  }
}
</script>
